<html>
  <head>
    <script src="img_library.js"></script>
    <link rel="stylesheet" type="text/css" href="card.css">
    <meta name="viewport" content="width=360, initial-scale=1">
  </head>
  <body>
    <nav id='main_menu'> 
      <ul>
        <li><a href="index.html">Card Library</a></li>
        <li><div>Image Library</div></li>
        <li><a href="deck.html">Deck</a></li>
      </ul>
    </nav>
    <div style="clear: both;">
    <form>
      <div class="block">
        <label for="index">index</label>
        <input type="number" id="index" min="0" max="4" value="0"">
        <input type="button" value="<" onClick="ImageEdit.dec(document.getElementById('index'));ImageEdit.redraw()" />
        <input type="button" value=">" onClick="ImageEdit.inc(document.getElementById('index'));ImageEdit.redraw()" />
      </div>
      <div class="block">
        <label for="sourceImg">source image</label>
        <input type='file' id="sourceImg" />
      </div>
      <div class="block">
        <label for="blur">blur</label>
        <input type="number" id="blur" min="1" max="5" value="1">
        <input type="button" value="<" onClick="ImageEdit.dec(document.getElementById('blur'));ImageEdit.redraw()" />
        <input type="button" value=">" onClick="ImageEdit.inc(document.getElementById('blur'));ImageEdit.redraw()" />
      </div>
      <div class="block">
        <input type='button' id="update" value="Update" onClick="ImageEdit.processImage();"/>
        <canvas id="imageProcess" width="80" height="80"></canvas>
      </div>
    </form>
    
    <div class="block">
      <canvas id="imageLibrary" width="400" height="120"></canvas>
    </div>
    <script>
      var ImageEdit = new function () 
      {
        var processingImage = 0;
        var currentLoadIndex = 0;
        var currentImage = 0;
        var timeoutTime = 100;
        var numImages = 4;
        this.inc = function(elem)
        {
          var value = parseInt(elem.value);
          if (value < elem.max)
          {
            elem.value = value+1;
          }
          else
          {
            elem.value = elem.max;
          }
        }
        this.dec = function(elem)
        {
          var value = parseInt(elem.value);
          if (value > elem.min)
          {
            elem.value = value-1;
          }
          else
          {
            elem.value = elem.min;
          }
        }
        function setImage(img)
        {
          var index = document.getElementById('index').value;
          ImageLibrary.set(index, img);
          ImageEdit.redraw();
          processingImage = 0;
          ImageLibrary.save(index);
        }
        this.clickImage = function(p)
        {
          var canvas = document.getElementById('imageLibrary');
          var index = Math.max(0,Math.min(numImages-1, Math.floor((p.x/canvas.width)*numImages)));
          document.getElementById('index').value = index;
          ImageEdit.redraw();
        }
        
        function getElemOffset( element )
        {  
          var offsetX = 0, offsetY = 0;
          // Compute the total offset
          if (element.offsetParent !== undefined) {
            do {
              offsetX += element.offsetLeft;
              offsetY += element.offsetTop;
            } while ((element = element.offsetParent));
          }
          return { x: offsetX, y: offsetY };
        }
        this.init = function()
        {
          var canvas = document.getElementById('imageLibrary');
          
          var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));
          if (!isTouch)
          {
            canvas.addEventListener('mousedown', function(event)
            {
              if (event.which == 1)
              {
                var offset = getElemOffset(canvas);
                var p = { 
                  x : event.pageX - offset.x,
                  y : event.pageY - offset.y
                };
                ImageEdit.clickImage(p);
              }
            });
          }
          else
          {
            canvas.addEventListener('touchstart',  function(event)
            {
              if (event.targetTouches.length == 1) 
              {
                var offset = getElemOffset(canvas);
                var p = { 
                  x : event.targetTouches[0].pageX - offset.x,
                  y : event.targetTouches[0].pageY - offset.y
                };
                ImageEdit.clickImage(p);
              }
            });
          }
        }
        this.redraw = function()
        {
          var index = document.getElementById('index').value;
          var canvas = document.getElementById('imageLibrary');
          
          canvas.width = (ImageLibrary.WIDTH+ImageLibrary.PADDING*2)*numImages;
          canvas.height = (ImageLibrary.HEIGHT+ImageLibrary.PADDING*2)*2;
    
          var ctx = canvas.getContext("2d");
          ctx.fillStyle = "#898389";
          ctx.fillRect(0, 0, canvas.width, canvas.height);
          for (var i=0; i<numImages; i++)
          {
            var imgData = {
              x:i*(ImageLibrary.WIDTH+ImageLibrary.PADDING*2),
              y:0, 
              w:ImageLibrary.WIDTH+ImageLibrary.PADDING*2, 
              h:ImageLibrary.HEIGHT+ImageLibrary.PADDING*2
              };
            ImageLibrary.draw(canvas, index==i, ImageLibrary.Images[i], imgData);
          }
        }
        this.load = function()
        {
          ImageLibrary.load(currentLoadIndex);
          ImageEdit.redraw();
          currentLoadIndex = currentLoadIndex+1;
          if (currentLoadIndex < numImages)
          {
            setTimeout(ImageEdit.load, timeoutTime); 
          }
          else
          {
            currentLoadIndex = 0;
          }
        }
        this.startProcess = function(img)
        {
          var processStatus = document.getElementById('update');
          processStatus.value = "processing";
          
          processingImage = 2;
          currentImage = img;
          
          setTimeout(ImageEdit.processStep, timeoutTime);
        }
        this.processStep = function()
        {
          var processStatus = document.getElementById('update');
          var canvas = document.getElementById('imageProcess');
          processingImage = processingImage + 1;
          if (processingImage == 3)
          {
            processStatus.value = "src"+processingImage;
            canvas.width = ImageLibrary.WIDTH;
            canvas.height = ImageLibrary.HEIGHT;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(currentImage, 0,0,ImageLibrary.WIDTH, ImageLibrary.HEIGHT);
            currentImage = 0;
            setTimeout(ImageEdit.processStep, timeoutTime); 
          }
          else if (processingImage < 6)
          {
            processStatus.value = "blur"+processingImage;
            ImageLibrary.processBlur(canvas)
            setTimeout(ImageEdit.processStep, timeoutTime); 
          }
          else if (processingImage == 6)
          {
            processStatus.value = "gray"+processingImage;
            ImageLibrary.processGray(canvas)
            setTimeout(ImageEdit.processStep, timeoutTime); 
          }
          else if (processingImage == 7)
          {
            processStatus.value = "toon"+processingImage;
            ImageLibrary.processToon(canvas)
            setTimeout(ImageEdit.processStep, timeoutTime); 
          }
          else if (processingImage == 8)
          {
            processStatus.value = "processed";
            var image = new Image;
            image.src = canvas.toDataURL();
            currentImage = image;
            
            setTimeout(ImageEdit.processStep, timeoutTime); 
          }
          else
          {
            processStatus.value = "update";
            setImage(currentImage);
            processingImage = 0;
            currentImage = 0;
            
            var ctx = canvas.getContext("2d");
            ctx.fillStyle = "#898389";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
          }
        }
        this.processImage = function()
        {
          var sourceImg = document.getElementById('sourceImg');
          if (processingImage == 0 && sourceImg.files && sourceImg.files[0])
          {
            var processStatus = document.getElementById('update');
            processStatus.value = "loading";
            processingImage = 1;
            var reader = new FileReader();
            reader.addEventListener("load" , function (e) {
                var img=new Image();
                img.src=reader.result;
                ImageEdit.startProcess(img); 
            });
            reader.readAsDataURL(sourceImg.files[0]);
          }
        }
      }
      ImageEdit.init();
      ImageEdit.load();
    </script>
  </body>
</html>
